<template>
  <el-row class="countdown">
    <el-col v-show="false" :span="6">
      <p class="digit">{{ days | zerofill }}</p>
      <p class="text">天</p>
    </el-col>
    <el-col :span="8">
      <p class="digit">{{ hours | zerofill }}</p>
      <p class="text">时</p>
    </el-col>
    <el-col :span="8">
      <p class="digit">{{ minutes | zerofill }}</p>
      <p class="text">分</p>
    </el-col>
    <el-col :span="8">
      <p class="digit">{{ seconds | zerofill }}</p>
      <p class="text">秒</p>
    </el-col>
    <el-col>
      <div class="deadline">
        <p>
          本轮截止时间:
          <span>{{ date.getHours() | zerofill }}:{{ date.getMinutes() | zerofill }}:{{ date.getSeconds() | zerofill }}</span>
        </p>
        <p>{{ round.desc }}</p>
        <p v-if="this.now >= this.due">等待结果生成...</p>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { clearInterval } from "timers";
export default {
  /* ready function will be here */
  props: ["round"],
  data() {
    return {
      date: new Date(this.round.date),
      due: Math.trunc(Date.parse(this.round.date) / 1000),
      now: Math.trunc(new Date().getTime() / 1000),
      interval: null
    };
  },
  beforeMount() {
    this.start();
  },
  beforeDestroy() {
    this.stop();
  },
  computed: {
    seconds() {
      return (this.due - this.now) % 60;
    },

    minutes() {
      return Math.trunc((this.due - this.now) / 60) % 60;
    },

    hours() {
      return Math.trunc((this.due - this.now) / 60 / 60) % 24;
    },

    days() {
      return Math.trunc((this.due - this.now) / 60 / 60 / 24);
    }
  },
  methods: {
    start() {
      this.interval = setInterval(() => {
        this.now = Math.trunc(new Date().getTime() / 1000);
      }, 1000);
    },
    stop() {
      clearInterval(this.interval);
    }
  }

  /* Computed properties will be here */
};
</script>

<style lang="css" scoped>
.countdown {
  text-align: center;
  /* background-color: #34495e; */
  padding: 0.5em 2em;
}

.text {
  /* color: #1abc9c; */
  color: whitesmoke;
  font-size: 1.5em;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 40;
}

.digit {
  color: #ecf0f1;
  font-size: 4em;
  font-weight: 100;
  font-family: "Roboto", sans-serif;
}

.deadline {
  color: whitesmoke;
  font-weight: 200;
  font-size: 1.5em;
  margin-top: 2em;
}
.deadline span {
  font-weight: bold;
  color: rgb(241, 83, 83);
}
</style>
